// 返回一个渲染函数
// export default function () {
//     return (<div>小爱你</div>)
// }
// optionsApi

// setup函数模式
import { defineComponent, ref } from "vue"


const A = (_, { slots }) => (<>
    <div>{slots.default ? slots.default() : "默认值"}</div>
    <div>{slots.foo?.()}</div>
</>)

interface Props {
    name?: string
}
export default defineComponent({
    props: {
        name: String
    },
    emits: ['on-click'],
    setup(props: Props, { emit }) {
        const flag = ref(true)
        let data = [{ name: '小满1' }, { name: '小满2' }]
        // ref template 自动解包.value  tsx并不会
        // v-show支持 
        // return () => (<div v-show={flag.value}>小满setup</div>)
        // v-if 不支持  用三元表达式去代替
        // return () => (<><div>{flag.value ? <div>true</div> : <div>false</div>}</div></>)
        // map代替v-for
        // v-bind {}代替
        const fn = (item: any) => {
            console.log('触发了', item);
            emit('on-click', item)
        }
        const slot = {
            default: () => (<div>小满default slots</div>),
            foo: () => (<div>小满foo slots</div>)
        }
        const v = ref<string>('')
        return () => (<>
            <input v-model={v.value} type="text" />
            <div>{v.value}</div>
            <hr />
            <A v-slots={slot}></A>
            <hr />
            <div>{props.name}</div>
            <hr />
            {data.map(v => {
                return <div onClick={() => fn(v)} name={v.name}>{v.name}</div>
            })}
        </>)
    }
})
